<!--  -->
<template>
  <div class="related-play" v-if="relatedPlayList.length !== 0">
    <div class="top">
      <span>推荐歌单</span>
      <span><icon icon="#icon-right-circle" /></span>
    </div>
    <div class="bottom">
      <div class="play-list" v-for="item in relatedPlayList">
        <div class="list-img">
          <img :src="item.imageUrl" alt="" />
          <div class="count">
            <icon icon="#icon-music" />
            <p> {{ item.playCount | playCount(item.playCount) }}</p>
          </div>
          <icon icon="#icon-bofang" class="bofang" />
        </div>
        <div class="list-title">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icon from "@/components/content/icon/Icon";
export default {
  name: "relatedPlay",
  data() {
    return {
      newRelatedPlayList: [],
    };
  },
  props: {
    relatedPlayList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    icon,
  },
  filters: {
    playCount(value) {
      if ( value.toString().length > 5 && value.toString().length < 10) {
      return ((value / 10000).toFixed(1) + "万").toString();
      } else if (value.toString().length >= 10) {
        return (value / 100000000).toFixed(2) + "亿";
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.related-play {
  margin: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    font-size: $font-size-large;
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .play-list {
      width: 32%;
      height: 140px;
      overflow: hidden;
      margin-top: 10px; 
      .list-img {
        position: relative;
        width: 95px;
        height: 100px;
        margin-bottom: 8px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .count {
          display: flex;
          position: absolute;
          left: 5px;
          bottom: 7px;
          font-size: $font-size-small;
        }
        .bofang {
          position: absolute;
          right: 5px;
          bottom: 5px;
        }
      }
      .list-title {
        font-size: $font-size-small-s;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -moz-box;
          -moz-line-clamp: 2;
          -moz-box-orient: vertical;
          word-wrap: break-word;
          word-break: break-all;
          white-space: normal;
        }
      }
    }
  }
}
</style>